@import "bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css";
@import "bpmn-js-token-simulation/assets/css/font-awesome.min.css";
@import "bpmn-js-token-simulation/assets/css/normalize.css";
@import "bpmn-js/dist/assets/diagram-js.css";
@import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
@import "bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";

:root {
  --success-color: #4eb819;
  --primary-color: #409EFF;
  --warning-color: #E6A23C;
  --danger-color: #F56C6C;
  --cancel-color: #909399;
}

.process-viewer {
  position: relative;
  border: 1px solid #EFEFEF;
  background: url('') repeat!important;

  .success-arrow {
    fill: var(--success-color);
    stroke: var(--success-color);
  }

  .success-conditional {
    fill: white;
    stroke: var(--success-color);
  }

  .fail-arrow {
    fill: var(--warning-color);
    stroke: var(--warning-color);
  }

  .fail-conditional {
    fill: white;
    stroke: var(--warning-color);
  }

  .success.djs-connection {
    .djs-visual path {
      stroke: var(--success-color)!important;
      marker-end: url(#sequenceflow-end-white-success)!important;
    }
  }

  .success.djs-connection.condition-expression {
    .djs-visual path {
      marker-start: url(#conditional-flow-marker-white-success)!important;
    }
  }

  .success.djs-shape {
    .djs-visual rect {
      stroke: var(--success-color)!important;
      fill: var(--success-color)!important;
      fill-opacity: 0.15!important;
    }

    .djs-visual polygon {
      stroke: var(--success-color)!important;
    }

    .djs-visual path:nth-child(2) {
      stroke: var(--success-color)!important;
      fill: var(--success-color)!important;
    }

    .djs-visual circle {
      stroke: var(--success-color)!important;
      fill: var(--success-color)!important;
      fill-opacity: 0.15!important;
    }
  }

  .primary.djs-shape {
    .djs-visual rect {
      stroke: var(--primary-color)!important;
      fill: var(--primary-color)!important;
      fill-opacity: 0.15!important;
    }

    .djs-visual polygon {
      stroke: var(--primary-color)!important;
    }

    .djs-visual circle {
      stroke: var(--primary-color)!important;
      fill: var(--primary-color)!important;
      fill-opacity: 0.15!important;
    }
  }

  .warning.djs-connection {
    .djs-visual path {
      stroke: var(--warning-color)!important;
      marker-end: url(#sequenceflow-end-white-fail)!important;
    }
  }

  .warning.djs-connection.condition-expression {
    .djs-visual path {
      marker-start: url(#conditional-flow-marker-white-fail)!important;
    }
  }

  .warning.djs-shape {
    .djs-visual rect {
      stroke: var(--warning-color)!important;
      fill: var(--warning-color)!important;
      fill-opacity: 0.15!important;
    }

    .djs-visual polygon {
      stroke: var(--warning-color)!important;
    }

    .djs-visual path:nth-child(2) {
      stroke: var(--warning-color)!important;
      fill: var(--warning-color)!important;
    }

    .djs-visual circle {
      stroke: var(--warning-color)!important;
      fill: var(--warning-color)!important;
      fill-opacity: 0.15!important;
    }
  }

  .danger.djs-shape {
    .djs-visual rect {
      stroke: var(--danger-color)!important;
      fill: var(--danger-color)!important;
      fill-opacity: 0.15!important;
    }

    .djs-visual polygon {
      stroke: var(--danger-color)!important;
    }

    .djs-visual circle {
      stroke: var(--danger-color)!important;
      fill: var(--danger-color)!important;
      fill-opacity: 0.15!important;
    }
  }

  .cancel.djs-shape {
    .djs-visual rect {
      stroke: var(--cancel-color)!important;
      fill: var(--cancel-color)!important;
      fill-opacity: 0.15!important;
    }

    .djs-visual polygon {
      stroke: var(--cancel-color)!important;
    }

    .djs-visual circle {
      stroke: var(--cancel-color)!important;
      fill: var(--cancel-color)!important;
      fill-opacity: 0.15!important;
    }
  }
}

.process-viewer .djs-tooltip-container, .process-viewer .djs-overlay-container, .process-viewer .djs-palette {
  display: none;
}

.process-panel__container {
  box-sizing: border-box;
  padding: 0 8px;
  max-height: 100%;
  overflow-y: scroll;
}
.panel-tab__title {
  font-weight: 600;
  padding: 0 8px;
  font-size: 1.1em;
  line-height: 1.2em;
  i {
    margin-right: 8px;
    font-size: 1.2em;
  }
}
.panel-tab__content {
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid #eeeeee;

  .panel-tab__content--title {
    display: flex;
    justify-content: space-between;
    padding-bottom: 8px;
    span {
      flex: 1;
      text-align: left;
    }
  }
}
.element-property {
  width: 100%;
  display: flex;
  align-items: flex-start;
  margin: 8px 0;
  .element-property__label {
    display: block;
    width: 90px;
    text-align: right;
    overflow: hidden;
    padding-right: 12px;
    line-height: 32px;
    font-size: 14px;
    box-sizing: border-box;
  }
  .element-property__value {
    flex: 1;
    line-height: 32px;
  }
  .el-form-item {
    width: 100%;
    margin-bottom: 0;
    padding-bottom: 18px;
  }
}
.list-property {
  flex-direction: column;
  .element-listener-item {
    width: 100%;
    display: inline-grid;
    grid-template-columns: 16px auto 32px 32px;
    grid-column-gap: 8px;
  }
  .element-listener-item + .element-listener-item {
    margin-top: 8px;
  }
}
.listener-filed__title {
  display: inline-flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin-top: 0;
  span {
     /* width: 200px; */
    text-align: left;
    font-size: 14px;
  }
  i {
    margin-right: 8px;
  }
}
.element-drawer__button {
  margin-top: 8px;
  width: 100%;
  display: inline-flex;
  justify-content: space-around;
}
.element-drawer__button > .el-button {
  width: 100%;
}

.el-collapse-item__content {
  padding-bottom: 0;
}
.el-input.is-disabled .el-input__inner {
  color: #999999;
}
.el-form-item.el-form-item--mini {
  margin-bottom: 0;
  & + .el-form-item {
    margin-top: 16px;
  }
}


// 边框被 token-simulation 样式覆盖了
.djs-palette {
  background: var(--palette-background-color);
  border: solid 1px var(--palette-border-color) !important;
  border-radius: 2px;
}

.my-process-designer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .my-process-designer__header {
    width: 100%;
    min-height: 36px;
    .el-button {
      text-align: center;
    }
    .el-button-group {
      margin: 4px;
    }
    .el-tooltip__popper {
      .el-button {
        width: 100%;
        text-align: left;
        padding-left: 8px;
        padding-right: 8px;
      }
      .el-button:hover {
        background: rgba(64, 158, 255, 0.8);
        color: #ffffff;
      }
    }
    .align {
      position: relative;
      i {
        &:after {
          content: "|";
          position: absolute;
          transform: rotate(90deg) translate(200%, -10%);
        }
      }
    }
    .align.align-left i {
      transform: rotate(90deg);
    }
    .align.align-right i {
      transform: rotate(-90deg);
    }
    .align.align-top i {
      transform: rotate(180deg);
    }
    .align.align-bottom i {
      transform: rotate(0deg);
    }
    .align.align-center i {
      transform: rotate(90deg);
      &:after {
        transform: rotate(90deg) translate(0, -10%);
      }
    }
    .align.align-middle i {
      transform: rotate(0deg);
      &:after {
        transform: rotate(90deg) translate(0, -10%);
      }
    }
  }
  .my-process-designer__container {
    display: inline-flex;
    width: 100%;
    flex: 1;
    .my-process-designer__canvas {
      flex: 1;
      height: 100%;
      position: relative;
      background: url("")
      repeat !important;
      div.toggle-mode {
        display: none;
      }
    }
    .my-process-designer__property-panel {
      height: 100%;
      overflow: scroll;
      overflow-y: auto;
      z-index: 10;
      * {
        box-sizing: border-box;
      }
    }
    svg {
      width: 100%;
      height: 100%;
      min-height: 100%;
      overflow: hidden;
    }
  }
}

//侧边栏配置
.djs-palette.open {
  .djs-palette-entries {
    div[class^="bpmn-icon-"]:before,
    div[class*="bpmn-icon-"]:before {
      line-height: unset;
    }
    div.entry {
      position: relative;
    }
    div.entry:hover {
      &::after {
        width: max-content;
        content: attr(title);
        vertical-align: text-bottom;
        position: absolute;
        right: -10px;
        top: 0;
        bottom: 0;
        overflow: hidden;
        transform: translateX(100%);
        font-size: 0.5em;
        display: inline-block;
        text-decoration: inherit;
        font-variant: normal;
        text-transform: none;
        background: #fafafa;
        box-shadow: 0 0 6px #eeeeee;
        border: 1px solid #cccccc;
        box-sizing: border-box;
        padding: 0 16px;
        border-radius: 4px;
        z-index: 100;
      }
    }
  }
}
pre {
  margin: 0;
  height: 100%;
  overflow: hidden;
  max-height: calc(80vh - 32px);
  overflow-y: auto;
}
.hljs {
  word-break: break-word;
  white-space: pre-wrap;
}
.hljs * {
  font-family: Consolas, Monaco, monospace;
}


